<template>
	<view>
		<button @click="returnHtml">返回上一页</button>


		<view class="page-body">
			<view class="page-section page-section-gap">
				<map id="myMap" style="width: 100%; height: 300px;" :latitude="latitude" :longitude="longitude" :markers="covers"
					@regionchange="regionchange">
				</map>
			</view>
		</view>
		<view class="propertyBox">
			<h4>课程名称:</h4>
			<input class="uni-input" v-model="courseName" focus placeholder="请输入课程名称" />
		</view>


		<h4>打卡地址:{{addressListZ1}}</h4>


		<view class="propertyBox">
			<h4>打卡范围:</h4>
			<view class="uni-list-cell-db">
				<picker @change="WeekBindPickerChange" :value="index" :range="array">
					<view class="uni-input">{{array[index]}}</view>
				</picker>
			</view>
			<h4>米</h4>
		</view>

		<view class="propertyBox">

			<h4>打卡时间:</h4>
			<h4>星期-</h4>
			<view class="uni-list-cell-db">
				<picker @change="timeBindPickerChange" :value="index" :range="timeArray">
					<view class="uni-input">{{timeArray[timeIndex]}}</view>
				</picker>
			</view>
			/<h4>时间:</h4>
			<view class="uni-list-cell-db">
				<picker mode="time" v-model="time" start="09:01" end="21:01" @change="bindTimeChange">
					<view class="uni-input">{{time}}</view>
				</picker>
			</view>
		</view>
		
		






		<button style="width: 50%;" @click="createCourse">创建</button>
	</view>
</template>

<script>
	var self, mapCtx
	export default {
		data() {
			return {
				latitude: 39.909,
				longitude: 116.39742,
				covers: [{
					latitude: 39.909,
					longitude: 116.39742,
					iconPath: '../../../static/location.png'
				}],
				courseName:'',
				array: [500, 1000, 2000, 3000],
				index: 0,
				time: '12:01',
				timeIndex: 0,
				timeArray: ['一', '二', '三', '四', '五', '六', '天'],
				addressListZ1: "测试地址",
			}
		},
		onShow() {
			uni.hideTabBar({});
			this.getPosition();
			
			
		},
		onLaunch() {
			// 这里应该是尝试拉取数据的地方
			console.log("当前尝试拉取数据");
			// 获取当前map
			mapCtx = wx.createMapContext('myMap')
		},
		methods: {
			WeekBindPickerChange(e){
				this.index=e.target.value;
			},
			createCourse(e){
				console.log('this.time',this.time);
				
				
				uni.request({
								url: uni.getStorageSync('serviceIp')+'/teacher/addCourse',
								method:'POST',
								header:{
									'user':uni.getStorageSync("user")
								},
								data:{
									courseName:this.courseName,
									punchCardScope:this.array[this.index],
									latitude:this.covers[0].latitude,
									longitude:this.covers[0].longitude,
									punchCardWeek:this.timeArray[this.timeIndex],
									punchCardDate:this.time
								},
								//请求成功后返回
								success: (res) => {
									// 请求成功之后将数据给Info
								   console.log('res res',res);
									if(res.data.status){
										uni.showToast({
											title: '添加成功!',
											//将值设置为 success 或者直接不用写icon这个参数
											icon: 'success',
											//显示持续时间为 2秒
											duration: 2000
										}) 
									}else{
									
										uni.showToast({
											title: '添加失败!',
											//将值设置为 success 或者直接不用写icon这个参数
											icon: 'error',
											//显示持续时间为 2秒
											duration: 2000
										}) 
										
									}
									
									
									
								},
								fail:(res)=>{
									console.log("查看fail返回的信息,",res);
								}
							});
				
				
			},
			getPosition() {
				const that = this;
				uni.getLocation({
					type: 'wgs84',
					geocode: true, //设
					success: function(lb) {
						console.log("位置信息", lb);
						console.log('当前位置的经度：' + lb.longitude);
						console.log('当前位置的纬度：' + lb.latitude);
						that.latitude = lb.latitude;
						that.longitude = lb.longitude;
						console.log(lb.longitude, lb.latitude);


						// 创建地图坐标对象
						var point = new plus.maps.Point(lb.longitude, lb.latitude);
						//静态方法，反向地理编码
						plus.maps.Map.reverseGeocode(point, {}, (event) => {
								var address = event.address; // 转换后的地理位置
								var point = event.coord; // 转换后的坐标信息
								var coordType = event.coordType; // 转换后的坐标系类型
								var reg = /.+?(省|市|自治区|自治州|县|区)/g;
								var addressList = address.match(reg).toString().split(",");
								//注意 因为存在直辖市， 当所在地区为普通省市时，addressList.length == 3，city = addressList[1];当所在地区为直辖市时addressList.length == 2，city = addressList[0];
								let city = addressList.length == 3 ? addressList[1] : addressList[0];

								let CityString = '';

								addressList.forEach(item => {
									CityString = CityString + item + "-";
								});
								that.addressListZ1 = CityString;

								console.log("addressList", addressList, that.addressListZ1);

							},
							function(e) {
								console.log("失败回调", e);
							}
						);


						that.covers[0].latitude = lb.latitude;
						that.covers[0].longitude = lb.longitude;
					},
				})
			},
			regionchange(event) {
				console.log('regionchange', event)
				if (event.type == 'regionchange') {
					this.getCenterLanLat()
				}

			},
			getCenterLanLat() {


				this.mapContext = uni.createMapContext("myMap", this);

				this.mapContext.getCenterLocation({
					type: 'wgs84',
					success: (res) => {
						let address = {
							latitude: res.latitude,
							longitude: res.longitude
						}
						this.longitude = address.longitude;
						this.latitude = address.latitude;
						console.log("getCenterLanLat", res);
						// 创建地图坐标对象
						var point = new plus.maps.Point(address.longitude, address.latitude);
						//静态方法，反向地理编码
						plus.maps.Map.reverseGeocode(point, {}, (event) => {
								var address = event.address; // 转换后的地理位置
								var point = event.coord; // 转换后的坐标信息
								var coordType = event.coordType; // 转换后的坐标系类型
								var reg = /.+?(省|市|自治区|自治州|县|区)/g;
								var addressList = address.match(reg).toString().split(",");
								//注意 因为存在直辖市， 当所在地区为普通省市时，addressList.length == 3，city = addressList[1];当所在地区为直辖市时addressList.length == 2，city = addressList[0];
								let city = addressList.length == 3 ? addressList[1] : addressList[0];

								let CityString = '';

								addressList.forEach(item => {
									CityString = CityString + item + "-";
								});
								this.addressListZ1 = CityString;

								console.log("addressList", addressList, this.addressListZ1);

							},
							function(e) {
								console.log("失败回调", e);
							}
						);


						this.covers[0].longitude = address.longitude;
						this.covers[0].latitude = address.latitude;


						this.$emit('longLatDetail', address)
						console.log('已经更新完数据')
					},
					
					fail: (err) => {
						console.log('getCenterLocation失败',err)

					}
				})
			},
			bindTimeChange(e) {
                this.time=e.target.value;
			},
			bindPickerChange() {

			},
			timeBindPickerChange(e) {
				this.timeIndex = e.target.value;
			},
			lower() {

			},
			returnHtml() {

				uni.switchTab({
					url: 'createCouse',
					success: (res) => {
						// #ifdef APP-PLUS
						let page = getCurrentPages().pop(); //跳转页面成功之后
						if (!page) return;
						// page.loadData(); //如果页面存在，则重新刷新页面
						console.log("触发页面刷新");
						// #endif 
					}
				});

			}
		}
	}
</script>

<style>
	.propertyBox {
		flex-flow: row;
		justify-content: flex-start;
		display: flex;
	}
</style>